<!--
绝对定位盒子不能利用【margin: 0 auto;】实现水平居中
但可以利用left和margin-left实现水平居中

水平居中
    - 往右：父容器宽度的一半     // 父容器记得加定位哦
        left: 50%;
    - 再往回（左）：绝对盒子宽度的一半
        margin-left: -数值;    // 负值

垂直居中
    - 往下：父容器高度的一半
        top: 50%;
    - 再往回（上）：绝对盒子高度的一半
        margin-top: -数值;    // 负值
-->
<style>
    * {
        margin: 0;
        padding: 0;
    }
    .box {
        /* 父盒子：别遗漏定位，否则绝对定位子盒子以浏览器可视区为参照 */
        position: relative;
        width: 400px;
        height: 400px;
        /* 相对定位可以用这个方式实现水平居中，绝对定位不行 */
        margin: 0 auto;
        background-color: cyan;
    }
    .absbox {
        /* --------------- */
        position: absolute;
        /* 水平 */
        left: 50%;
        margin-left: -100px;
        /* 垂直 */
        top: 50%;
        margin-top: -100px;
        /* --------------- */
        width: 200px;
        height: 200px;
        background-color: skyblue;
    }
</style>

<div class="box">
    <div class="absbox"></div>
</div>